<template>
  <div id="wrapper">
    <div style="width: 400px; margin: 120px auto;background-color:rgba(100,149,237,0.5); border-radius: 10px">
      <div style="width: 100%; height: 100px; color: #eee; font-size: 30px;line-height: 100px; text-align: center">欢迎注册
      </div>
      <div style="margin-top: 25px; width: 100%; height: 410px; text-align: center">
        <input v-model="user.username" type="text"
          style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 60%" placeholder="请输入用户名">
        <input v-model="user.password" type="password"
          style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 60%; margin-top: 20px" placeholder="请输入密码">
        <el-select v-model="user.sex" placeholder="请选择" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 65%" >
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <input v-model="user.age" type="text" maxlength="3"
          style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 60%;  margin-top: 20px"
          placeholder="请输入年龄">
        <input v-model="user.phone" type="text" maxlength="11"
          style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 60%;  margin-top: 20px"
          placeholder="请输入电话">
        <button @click="register"
          style="height: 40px; padding: 10px; width: 60%; margin-top: 25px; background-color: steelblue; color: white">注册</button>
        <div style="margin-top: 25px">
          <router-link style="width: 60%; text-align: right; display: inline-block; color: #eee" to="/">已有账号，去登录
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRegistered } from '@/api/login'
export default {
  name: 'RegisteredName',
  data() {
    return {
      user: {},
      options: [{
        value: '1',
        label: '男'
      }, {
        value: '0',
        label: '女'
      }]
    }

  },
  methods: {
    register() {
      getRegistered(this.user).then(res => {
        console.log(res);
        if (res.status===200) {
          this.$message.success("注册成功")
          this.$router.push("/")
        } else {
          this.$message.error("注册失败")
        }
      }).catch(err => {
        this.$message.error('请求出错了：' + err)
      })
    }
  }
}

</script>
